<template>
  <div class="diy-field-wrapper" 
    :class="[selected ? 'diy-widget-selected' : '']"
  >
    <Form.Item 
      v-bind="formItemProps" 
      v-if="widget.formItemFlag" 
      @click.stop="selectWidget(widget)"
    >
      <slot></slot>
    </Form.Item>
    <div v-else @click.stop="selectWidget(widget)">
      <slot></slot>
    </div>
    

    <template v-if="!!designer">
      <div class="diy-field-action background-opacity" v-if="designer.selectedId === widget.id">
        <i :title="t('designer.hint.selectParentWidget')" class="diy-field-action-danger">
          <Icon icon="ant-design:delete-outlined"  @click.stop="removeWidget"></Icon>
        </i>
      </div>

      <div class="drag-handler background-opacity" v-if="designer.selectedId === widget.id">
        <i :title="t('designer.hint.dragHandler')"><Icon icon="ant-design:drag-outlined"></Icon></i>
        <i v-if="widget.props?.hidden === true"><Icon icon="ant-design:eye-invisible-outlined"/></i>
      </div>
    </template>

  </div>
</template>
<script lang="ts" name="input-widget" setup>
import { ref, unref, computed, onMounted, watch, nextTick, provide, PropType } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { Icon } from '/@/components/Icon';
import { Form} from 'ant-design-vue'
import { isNumber } from '/@/utils/is';
import type { Designer } from '../../type'
const currProps = defineProps({
  widget: { type: Object, default: {}},
  // 父级组件列表
  parentList: { type: Array as PropType<any[]>, default: []},
  // 在父级列表中索引
  indexOfParentList: { type: Number, default: null},
  designer: { type: Object as () => Designer},
})

const { t } = useI18n('diyForm')
const designer = currProps.designer as Designer
const formItemProps = computed(() => {
  if (!currProps.widget.props) {
    console.warn('props is null')
    return
  }
  
  const { 
    formItemLabel, formItemRequired, formItemLabelAlign,
    formItemLabelTooltip
  } = currProps.widget.props

  return {
    label: formItemLabel || currProps.widget.type,
    required: formItemRequired,
    labelAlign: formItemLabelAlign,
    tooltip: formItemLabelTooltip,
    labelCol: designer.formItemConfig.labelCol
  }
})

const selected = computed(() => (currProps.widget.id === designer?.selectedId))

onMounted(() => {
  const { formItemLabel } = currProps.widget.props
  currProps.widget.props.formItemLabel = formItemLabel || currProps.widget.type
})

const selectWidget = (widget) => {
  if (!!designer) {
    designer.setSelected(widget)
 }
}

const removeWidget = () => {
  const { parentList, indexOfParentList } = currProps
  
  if (!!parentList) {
    const fieldRefName = designer.selectedWidget
    let nextSelected = null
    if (parentList.length === 1) {
      nextSelected = null
    } else if (parentList.length === (1 + indexOfParentList)) {
      nextSelected = parentList[indexOfParentList - 1]
    } else {
      nextSelected = parentList[indexOfParentList + 1]
    }

    nextTick(() => {
      parentList.splice(indexOfParentList, 1)
      designer.setSelected(nextSelected)
    })
  }

}
</script>

<style lang="less" scoped>

.diy-widget-selected {
  outline: 2px solid @primary-color !important;
}

.diy-field-wrapper {
  position: relative;
  padding-right: 10px;
  .diy-field-action {
    position: absolute;
    //bottom: -24px;
    bottom: 0px;
    right: -2px;
    height: 22px;
    line-height: 22px;
    z-index: 1000;
    .diy-field-action-danger {
      color: @danger-background-color !important;
    }

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 3px;
      cursor: pointer;
    }

    &:hover {
      opacity: 2;
      background: @primary-color;
    }
  }

  .drag-handler {
      position: absolute;
      top: 0;
      //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
      left: -1px;
      height: 20px;
      line-height: 20px;
      //background: $--color-primary;
      z-index: 9;

      i {
        font-size: 12px;
        font-style: normal;
        color: #fff;
        margin: 4px;
        cursor: move;
      }

      &:hover {
        //opacity: 1;
        background: @primary-color;
      }
    }
}

</style>
